<!-- 师傅评价列表 -->
<template>
    <div style="background-color: #EFF1F2;">
        <!-- line -->
        <div style="height: 16px;"></div>
        <!-- master info -->
        <div style="background-color: white;padding: 12px 16px;margin: 0 12px;">
            <!-- title -->
            <div style="display: flex;">
                <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                <div style="font-size: 18px;font-weight: bold;">师傅信息</div>
            </div>

            <div style="flex: 1;padding: 0 12px;">
                <div style="margin-top: 12px;display: flex;">
                    <el-image style="width: 90px;height: 90px;border-radius: 27px;" :src="commentInfo.userHeadImg">
                    </el-image>
                    <div style="flex: 1;padding-left: 12px;">
                        <el-descriptions column="1" size="medium" labelStyle="font-size: 14px;font-weight: bold;">
                            <el-descriptions-item label="姓名">{{ commentInfo.userNameSt }}</el-descriptions-item>
                            <el-descriptions-item label="师傅技能">{{ commentInfo.kindName }}</el-descriptions-item>
                            <el-descriptions-item label="地址">{{ commentInfo.address }}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div style="flex: 1;padding-left: 12px;">
                        <el-descriptions column="1" size="medium" labelStyle="font-size: 14px;font-weight: bold;">
                            <el-descriptions-item label="接单次数">5</el-descriptions-item>
                            <el-descriptions-item label="接单金额">133</el-descriptions-item>
                            <el-descriptions-item label="保证金">未缴纳</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </div>
            </div>
        </div>

        <div style="height: 16px;"></div>
        <!-- list -->
        <div style="background-color: white;padding: 20px;" v-for="(item,index) in subList" :key="index">
            <div style="display: flex;align-items: center;">
                <div style="font-size: 18px;font-weight: bold;">{{ item.productName }}</div>
                <div style="color: red;margin-left: 100px;">500</div>
            </div>
            <div style="color: #999999;font-size: 14px;margin-top: 12px;">服务类别：{{ item.kindName }}</div>
            <div style="display: flex;align-items: flex-end;margin-top: 12px;">
                <el-image style="width: 32px;height: 32px;border-radius: 27px;" :src="item.userHeadImg"></el-image>
                <div style="color: #666666;margin-left: 5px;font-size: 16px;">{{ item.userNameSt }}</div>
            </div>
            <div style="color: #333333;font-size: 16px;margin-top: 12px;font-weight: bold;">{{ item.content }}</div>
            <div style="display: flex;flex-wrap: wrap;margin-top: 12px;">
                <el-image v-for="(obj, idx) in item.imgList" :key="idx" :src="obj" style="width: 160px;height: 160px;border-radius: 27px;margin-right: 12px;" ></el-image>
            </div>
            <!-- <div style="display: flex;justify-content: flex-end;">
                <div style="display: flex;align-items: center;">
                    <img :src="btnicon" alt="" style="width: 14px;height: 14px;">
                    <div style="font-size: 14px;">评论</div>
                </div>
            </div> -->
            <div style="height: 0.5px;background-color: #ebebeb;margin-top: 12px;"></div>
        </div>
    </div>
  </template>
  
  <script>
import { getInfo } from '@/api/yzComment';
import { getStringList } from '@/utils/index';

  export default {
    components: {
    },
    data() {
      return {
        btnicon: require('@/assets/master-comments-btn.png'),
        currUserId: '',
        commentInfo: {},
        subList: []
      }
    },
    mounted() {
      this.currUserId = this.$router.history.current.params.id;
      this.subList = this.$router.history.current.params.records.subList;
      this.getCurrUserCommentInfo();
      this.handleCommentImage(this.subList);
    },
    methods: {
      // 获取当前用户评价信息
      async getCurrUserCommentInfo() {
        const { data } = await getInfo(this.currUserId);
        if (data.code === 200) {
          this.commentInfo = data.data || {};
        } else {
          this.$message({
            message: data.msg || '评价信息获取失败',
            type: 'error',
            showClose: true,
            duration: 3000,
          });
        }
      },
      // 获取评价图片
      handleCommentImage(list) {
        this.subList = list.map(item => {
          const imgList = getStringList(item.attements);
          return { ...item, imgList };
        })
      },
    }
  }
  </script>
  
  <style>
  .deleteBorder .el-tabs__nav-wrap::after{
      height: 0;
    }
  </style>
  